<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>热门活动</title>

		<style type="text/css">

			*{

				margin: 0;

				padding: 0;

			}

			div{

				width: 700px;

				height: 400px;

				margin: 20px auto;

			}

			div ul li{

				list-style: none;

				float: left;

				margin: 10px 18px;

				font-size: 12px;

			}

			div ul li a{

				text-decoration: none;

				color: black;

			}

			h2{

				font-size: 16px;

				display: inline-block;

				margin-bottom: 20px;

			}

			.more{

				float: right;

				font-size: 16px;

				font-weight: bold;

			}

		</style>

	</head>

	<body>

		<div>

			<h2>热门活动</h2>

			<p class="more">更多</p>

			<ul>

				<li>

					<a href="#"><img src="../img/img1.png"/></a>

					<p>推荐活动 |&nbsp;<a href="#">原创音乐现金榜T榜</a></p>

				</li>

				<li>

					<a href="#"><img src="../img/img2.png"/></a>

					<p>推荐节目|&nbsp;<a href="#">《TAImusic》爆笑来袭</a></p>

				</li>

				<li>

					<a href="#"><img src="../img/img3.png"/></a>

					<p>推荐歌单 |&nbsp;<a href="#">继续宠爱张国荣</a></p>

				</li>

				<li>

					<a href="#"><img src="../img/img4.png"/></a>

					<p>推荐活动|&nbsp;<a href="#">330金属音乐巡演 成都小酒馆音乐空间</a></p>

				</li>

			</ul>

		</div>		

	</body>

</html>


